<template>
  <a-row>
    <a-col :span="12">
      <a-card :title="$t('personal_information')">
        <a-form-model ref="userForm" layout="horizontal" :model="userForm" :label-col="{ span: 4 }" :wrapper-col="{ span: 15 }" autocomplete="off" :rules="userFormRules">
          <a-form-model-item label="Email" prop="userEmail" >
            <a-input v-model="userForm.userEmail" :readOnly="true" />
          </a-form-model-item>
          <a-form-model-item :label="$t('name')" prop="userName">
            <a-input v-model="userForm.userName" />
          </a-form-model-item>
          <a-form-model-item :label="$t('phone')" prop="userPhone">
            <a-input v-model="userForm.userPhone" />
          </a-form-model-item>
          <a-form-model-item :wrapper-col="{ offset: 4 }">
            <a-button type="primary" icon="save" @click="submitInfo()" :loading="confirmLoading">
              {{ $t("submit") }}
            </a-button>
          </a-form-model-item>
        </a-form-model>
      </a-card>
    </a-col>
    <a-col :span="12">
      <a-card :title="$t('reset_password')">
        <a-form-model ref="pwdForm" layout="horizontal" :model="pwdForm" :label-col="{ span: 5 }" :wrapper-col="{ span: 15 }" autocomplete="off" :rules="pwdFormRules">
          <a-form-model-item :label="$t('oldPwd')" prop="oldPwd" >
            <a-input-password v-model="pwdForm.oldPwd" />
          </a-form-model-item>
          <a-form-model-item :label="$t('newPwd1')" prop="newPwd1">
            <a-input-password v-model="pwdForm.newPwd1" />
          </a-form-model-item>
          <a-form-model-item :label="$t('newPwd2')" prop="newPwd2">
            <a-input-password v-model="pwdForm.newPwd2" />
          </a-form-model-item>
          <a-form-model-item :wrapper-col="{ offset: 5 }">
            <a-button type="primary" icon="save" @click="submitPwd()" :loading="confirmLoading">
              {{ $t("submit") }}
            </a-button>
          </a-form-model-item>
        </a-form-model>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
import {mapGetters} from 'vuex'
import {saveMyInfo, saveMyPwd} from '@/services/user'

export default {
  name: "MySettings",
  i18n: require('../i18n'),
  computed: {
    ...mapGetters('account', ['user']),
  },
  data () {
    let validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('Please input the password'));
      } else {
        if (this.pwdForm.newPwd2 !== '') {
          this.$refs.pwdForm.validateField('newPwd2');
        }
        callback();
      }
    };
    let validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('Please input the password again'));
      } else if (value !== this.pwdForm.newPwd1) {
        callback(new Error("Two inputs don't match!"));
      } else {
        callback();
      }
    };
    return {
      confirmLoading: false,
      userForm: {
        userId: 0,
        userEmail: "",
        userName: "",
        userPhone: "",
      },
      userFormRules: {
        userName: [{ required: true, message: ' ', trigger: 'blur' }],
        userPhone: [{ required: true, message: ' ', trigger: 'blur' }],
      },
      pwdForm: {
        oldPwd: "",
        newPwd1: "",
        newPwd2: "",
      },
      pwdFormRules: {
        oldPwd: [{ required: true, message: ' ', trigger: 'blur' }],
        newPwd1: [{ validator: validatePass, trigger: 'change' }],
        newPwd2: [{ validator: validatePass2, trigger: 'change' }],
      },
    }
  },
  methods: {
    submitInfo(){
      this.$refs.userForm.validate(valid => {
        if (valid) {
          this.confirmLoading = true
          saveMyInfo(this.userForm).then(res => {
            if(res.data.success) {
              this.$message.success({content: this.$t('submitSuccess')})
              this.user.userName = this.userForm.userName
              this.user.userPhone = this.userForm.userPhone
            }else{
              this.$message.error({content: this.$t(res.data.message)})
            }
            this.confirmLoading = false
          }).catch(error => {
            console.log(error)
          })
        } else {
          return false;
        }
      });
    },
    submitPwd(){
      this.$refs.pwdForm.validate(valid => {
        if (valid) {
          this.confirmLoading = true
          saveMyPwd(this.pwdForm).then(res => {
            if(res.data.success) {
              this.$message.success({content: this.$t('submitSuccess')})
            }else{
              this.$message.error({content: this.$t(res.data.message)})
            }
            this.confirmLoading = false
          }).catch(error => {
            console.log(error)
          })
        } else {
          return false;
        }
      });
    },
  },
  created() {
    this.userForm = JSON.parse(JSON.stringify(this.user))
  }
}
</script>